{% extends 'layout.html' %}

{% block content %}

    <div class="luffy-container">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="form-group">
                <div
                        style="position: relative;display: inline-block;height: 50px;min-width: 300px;overflow: hidden;">
                    <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;border: 1px dotted #9d9d9d;color: #9d9d9d;line-height: 50px;padding-left: 15px;">
                        <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                        <span>点击上传Excel文件</span>
                    </div>
                    <input name="customer_excel" type="file" id="excelFile"
                           style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #333333;z-index: 1001;opacity: 0;filter:alpha(opacity=0);">
                </div>
                <p class="help-block">注意：批量导入的Excel需使用规定格式模板. <a href="/customer/tpl/">下载模板</a></p>
            </div>
            <button type="submit" class="btn btn-primary">上传</button>
            {% if status %}
                <span style="color: green;">{{ msg }}</span>
            {% else %}
                <span style="color: red;">{{ msg }}</span>
            {% endif %}
        </form>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            $('#excelFile').change(function (e) {
                var fileName = e.currentTarget.files[0].name;
                $(this).prev().find('span').text(fileName);
            })
        })
    </script>
{% endblock %}
